<template>
<div class="footer-section">
    <div class="footer-container">
        <div class="footer-content">
            <!-- 关于我们 -->
            <div class="footer-column">
                <h3 class="footer-title">关于我们</h3>
                <div class="footer-info">
                    <p>官方网站：http://localhost:8081</p>
                    <p>微信公众号：地方文旅资源管理哥</p>
                    <p>地址：安徽省黄山市屯溪区站前路4号</p>
                    <p>邮政编码：245000   @2025 版权所有</p>
                </div>
            </div>
            
            <!-- 联系方式 -->
            <div class="footer-column">
                <h3 class="footer-title">联系方式</h3>
                <div class="footer-info">
                    <p>
                        <i class="el-icon-phone"></i>
                        客服电话: 400-123-4567
                    </p>
                    <p>
                        <i class="el-icon-message"></i>
                        邮箱: support@banmu-travel.com
                    </p>
                </div>
            </div>

            <!-- 友情链接 -->
            <div class="footer-column">
                <h3 class="footer-title">友情链接</h3>
                <div class="footer-info">
                    <p>中国铁路12306: https://www.12306.cn</p>
                    <p>美团: https://www.meituan.com</p>
                    <p>去哪儿旅行: https://www.qunar.com</p>
                    <p>携程: https://www.ctrip.com</p>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'HomeFooter'
}
</script>

<style scoped>
.footer-section {
    background-color: #333333;
    color: white;
    padding: 40px 0;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.footer-column {
    flex: 1;
    text-align: left; /* 左对齐 */
}

.footer-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    color: white;
    text-align: left; /* 标题也左对齐 */
}

.footer-info p {
    margin-bottom: 10px;
    font-size: 14px;
    color: #cccccc;
    line-height: 1.6;
    text-align: left; /* 内容左对齐 */
}

.footer-info i {
    margin-right: 8px;
    color: #409EFF;
}

.footer-link {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #409EFF;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-column {
        text-align: left; /* 移动端也保持左对齐 */
    }
}
</style> 